<template>
  <div class="inquiry">
    <div class="header">
      <p>
        <van-search
        shape="round"
        class="kuangzi"
        placeholder="感冒"
        />
        <van-icon name="chat-o" />
      </p>
    </div>

    <div class="quick">
      <dl>
        <dt>
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2184858882,2899629245&fm=26&gp=0.jpg" alt="">
        </dt>
        <dd>
          <h1>顶级名医</h1>
          <p>名医诊断更靠谱</p>
        </dd>
      </dl>
      <dl>
        <dt>
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608216413452&di=153b2cc1a9e974227fa3514a1fd3f4da&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F42%2Fw1056h586%2F20180606%2F2W6L-hcqccip6259390.jpg" alt="">
        </dt>
        <dd>
          <h1>优选专家</h1>
          <p>三甲医生来解忧</p>
        </dd>
      </dl>
    </div>
    <!-- 二级导航 -->
    <div class="nav">
        <el-row class="block-col-2">
          <el-col :span="8">
            <span class="demonstration">全部科室</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

           <el-col :span="6">
            <span class="demonstration">全国</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

           <el-col :span="6">
            <span class="demonstration">推荐排行</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

          <el-col :span="3">
            <span class="demonstration">筛选</span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                  <i class="el-icon-finished el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
    </div>

    <div class="unusual">

         <dl>
          <dt>
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3454814353,2170583697&fm=26&gp=0.jpg" alt="">
          </dt>
          <dd>
            <p class="tou">
              华佗
              <van-tag type="primary">救命部门</van-tag>
              <van-tag plain type="primary" class="biaoqian">关注</van-tag>
            </p>
            <span>
              擅长疾病
              <van-tag type="danger">疑难杂症</van-tag>
              <van-tag type="danger" class="biaoqian">开颅</van-tag>
              <van-tag type="danger">刮骨</van-tag>
            </span>
          </dd>
       </dl>
       <div class="pingjia">
         <p>
          <span>好评率<b>100%</b></span>
          <span>服务次数<b>2</b>次</span>
         </p>
          <p class="p2">
            <span><span>￥无价</span>起</span>
            <van-button type="info" class="zixun">立刻咨询</van-button>
          </p>
       </div>

       <dl>
          <dt>
            <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1608205730&di=8bc4eb37a2b6ecf7b722aba6ab5cabc4&src=http://ku.90sjimg.com/element_origin_min_pic/17/04/28/166047b2e16dd21af4efc0cee5f67430.jpg!/fwfh/804x899/quality/90/unsharp/true/compress/true" alt="">
          </dt>
          <dd>
            <p class="tou">
              李时珍
              <van-tag type="primary">造药部门</van-tag>
              <van-tag plain type="primary" class="biaoqian">关注</van-tag>
            </p>
            <span>
              擅长疾病
              <van-tag type="danger">本草纲目</van-tag>
              <van-tag type="danger" class="biaoqian">胃痛</van-tag>
              <van-tag type="danger">头痛</van-tag>
            </span>
          </dd>
       </dl>
       <div class="pingjia">
         <p class="p1">
          <span>好评率100%</span>
          <span>服务次数1</span>
         </p>
          <p class="p2">
            <span><span>￥10000</span>起</span>
            <van-button type="info" class="zixun">立刻咨询</van-button>
          </p>
       </div>

       <dl>
          <dt>
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608216193365&di=bc03434bf47f7833d89611e564a10aed&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181011%2Fa0a43ba2afc84d8f92b7f2ddd1f3b4e2.jpeg" alt="">
          </dt>
          <dd>
            <p class="tou">
              张仲景
              <van-tag type="primary">伤寒部门</van-tag>
              <van-tag plain type="primary" class="biaoqian">关注</van-tag>
            </p>
            <span>
              擅长疾病
              <van-tag type="danger">伤寒杂病论</van-tag>
              <van-tag type="danger" class="biaoqian">胃痛</van-tag>
              <van-tag type="danger">方剂</van-tag>
            </span>
          </dd>
       </dl>
       <div class="pingjia">
         <p>
          <span>好评率<b>100%</b></span>
          <span>服务次数1</span>
         </p>
          <p class="p2">
            <span><span>￥1000000</span>起</span>
            <van-button type="info" class="zixun">立刻咨询</van-button>
          </p>
       </div>

      

    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Search);
export default {
  name:"inquiry"
};
</script>

<style scoped>
.pingjia .p2{
  display: flex;
  justify-content: space-between;
}
.pingjia .p1{
  display: flex;
}
.header span,i{
  font-weight: bolder;
  font-size:18px ;
}
.pingjia{
  width: 100%;
  line-height:35px;
}
.unusual .pingjia{
  width: 100%;
  background: #fff;
}
.unusual .zixun{
  border-radius: 20px;
  width: 85px;
  height: 30px;
  font-size: 12px;
  float:right;
  background: rgb(253, 186, 0);
}
.unusual .biaoqian{
  margin:10px;
}
.unusual dl dd{
  line-height:40px;
}
.unusual dl .tou{
  font-size: 24px;
  font-weight: bolder;
}

.unusual dl{
  margin-top:10px;
  width: 100%;
  background: #fff;
  display: flex;
}
.unusual dl dt img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.header p{
  width: 100%;
  height: 45px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}
.header .kuangzi{
    width: 95%;
}
.my-swipe {
  border-radius: 0.05rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  text-align: center;
  border-radius: 0.05rem;
}
.my-swipe .van-swipe-item img {
  height: 1rem;
  border-radius: 0.05rem;
  width: 100%;
}
.inquiry {
  padding: 0.1rem;
}

.quick {
  background: #fbfbfb;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.quick dl {
  background: white;
  width: 45%;
  height: 0.8rem;
  border-radius: 0.1rem;
  display: flex;
  justify-content: space-around;
  /* box-shadow: #000000 0.01rem 0.01rem 0.1rem 0.01rem; */
}
.quick dl dt {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.quick dl dd {
  line-height: 0.4rem;
}
.quick dl dd p{
    color: rgb(167, 167, 167);
}
.quick dl dt dd {
  float: right;
}
.quick dt img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 1rem;
}
.inquiry{
  background:#fbfbfb;
}


</style>
